<template>
  <div class="left-bar">
    <el-menu router :default-active="active">
      <el-menu-item-group title="服务器">
        <el-menu-item index="/">仪表盘</el-menu-item>
        <el-menu-item index="/server">服务器</el-menu-item>
        <el-menu-item index="/stream">数据流</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="告警">
        <el-menu-item index="/rule">数据规则</el-menu-item>
        <el-menu-item index="/action">告警动作</el-menu-item>
        <el-menu-item index="/error">告警历史</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="系统设置">
        <el-menu-item index="/application">应用</el-menu-item>
        <el-menu-item index="/log">访问记录</el-menu-item>
        <el-menu-item v-if="$store.state.user.isAdmin" index="/user">用户管理</el-menu-item>
        <el-menu-item v-if="$store.state.user.isAdmin" index="/setting">系统设置</el-menu-item>
      </el-menu-item-group>
    </el-menu>
  </div>
</template>


<script>
  export default {
    name: 'left-bar',
    data() {
      return {}
    },
    methods: {},
    created() {
      document.title = this.$store.state.user.title || document.title
    },
    computed: {
      active() {
        return this.$route.path.split('/').slice(0, 2).join('/')
      },
    },
  }
</script>


<style lang="scss">
  .left-bar {
    position: fixed;
    top: 60px;
    width: 200px;
    min-height: 100%;
    height: 100%;
    border-right: 1px solid #e8e8e8;
    z-index: 999;
    .el-menu {
      border-right: none;
    }
    .el-menu-item, .el-submenu__title {
      height: 48px;
      line-height: 48px;
    }
    .el-menu-item.is-active {
      background-color: #ecf5ff;
    }
  }
</style>
